<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleShowTempList" type="primary" icon="el-icon-edit">showTemp</el-button>
    </div>
    <el-form :rules="rules" ref="dataForm" :model="tempApplicationHeader" label-width="120px">
      <el-form-item label="Title" prop='title'>
        <el-input v-model="tempApplicationHeader.title"></el-input>
      </el-form-item>
      <el-form-item label="Applicant">
        <el-input disabled v-model="userinfo.user_name"></el-input>
      </el-form-item>
      <el-form-item label="Organization">
        <el-input disabled v-model="userinfo.organization_name"></el-input>
      </el-form-item>
      <el-form-item label="Application Date">
        <el-col :span="11">
          <el-date-picker disabled type="date" placeholder="Pick a date" v-model="tempApplicationHeader.create_date" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="Reason">
        <el-col :span="11">
        <el-input type="textarea" v-model="tempApplicationHeader.reason"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="createData">Create</el-button>
        <el-button  @click="onCancel">Return</el-button>
      </el-form-item>
    </el-form>

<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogTableVisible">
      
    <el-table :data="tempResourceList" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label='Index' width="95">
        <template slot-scope="scope">
          {{ 1 + scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="Resource Name">
        <template slot-scope="scope">
          {{scope.row.resources_name}}
        </template>
      </el-table-column>
      <el-table-column label="Amount" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.quantity}}
        </template>
      </el-table-column>
      <el-table-column label="Unit" width="80" align="center">
        <template slot-scope="scope">
          {{scope.row.unit}}
        </template>
      </el-table-column>
    </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogTableVisible = false">Close</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import { addResourceApplication } from '@/api/application'
import { getInfo } from '@/api/user'

export default {
  data() {
    return {
      rolesList: null,
      listLoading: false,
      userinfo: { },
      tempResourceList: [],
      dialogTableVisible: false,
      dialogStatus: '',
      textMap: {
        detail: 'Resources'
      },
      tempApplicationHeader: {
        title: '',
        reason: '',
        applicant_id: null,
        applicant_name: '',
        organization_id: null,
        organization_name: '',
        create_date: null
      },
      rules: {
        title: [{ required: true, message: 'Title is required', trigger: 'blur' }]
      },
      type: 'create',
      typeList: [{ 'type_name': 'Computer' }, { 'type_name': 'PC components' }]
    }
  },
  created: function() {
      this.tempResourceList = this.$route.params.resourcesList
      getInfo().then( response => {
          this.userinfo = response.user
          this.tempApplicationHeader.applicant_id = this.userinfo.user_id
          this.tempApplicationHeader.organization_id = this.userinfo.organization_id
          this.tempApplicationHeader.create_date = new Date()
      })
  },
  methods: {
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addResourceApplication(this.tempApplicationHeader,this.tempResourceList).then(() => {
            this.$notify({
              title: 'Success',
              message: 'Modify Success!',
              type: 'success',
              duration: 2000
            })
            this.$router.push({
              name: 'MyApplications',
              params: {

              }
            })
          })
        }
      })
    },
    onCancel() {
      this.$router.push({
        name: 'TempResourcesList', params: {
            'tempResourceList' : this.tempResourceList,
            'type': 'return'
        }
      })
    },
    handleShowTempList(){
      this.dialogStatus = 'detail'
      this.dialogTableVisible = true
    },
  }
}
</script>
